<div class="content-section introduction ">
    <div>
        <span class="feature-title">值班管理<span class="gt">&gt;</span>编辑计划</span>
    </div>
</div>
<p-progressBar mode="indeterminate" [hidden]="progressBar"></p-progressBar>
<div class="content-section implementation GridDemo" id="dutyedit">
    <div class="title col-sm-12">
        <div class="col-sm-1">
            <span>基本信息</span>
        </div>
        <div class="col-sm-11 pull-right">
            <button type="button"
                    class="pull-right"
                    pButton
                    [routerLink]="['/index/duty/manage']"
                    icon="fa-close"
                    style="width: 30px"></button>
        </div>
    </div>
        <p-messages [(value)]="msgs"></p-messages>
        <form [formGroup]="newSchdule"  (ngSubmit)="submit" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-1 control-label">计划编号：</label>
                <div class="col-sm-5 ui-no-padding-left-15px">
                    <input class="form-control cursor_not_allowed" type="text" formControlName="scheduleId"
                           pInputText id="did"[(ngModel)]="defaultId" readonly />
                </div>
                <label class="col-sm-1 control-label">排班人员：</label>
                <div class="col-sm-5 ui-no-padding-left-15px">
                    <input  class="form-control cursor_not_allowed" formControlName="scheduleCreator"
                            type="text" pInputText id="creator"
                            readonly [(ngModel)]="defaultCreator" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">
                    <span ngClass="start_red">*</span>
                    计划名称：
                </label>
                <div class="col-sm-5 ui-no-padding-left-15px">
                    <input formControlName="schduleName"
                           class="form-control"
                           type="text" pInputText id="name"
                           placeholder="请填写计划名称"
                           [class.ng-dirty]="!newSchdule.controls.schduleName.untouched || !newSchdule.controls.schduleName.valid"
                           [class.ng-invalid]="!newSchdule.controls.schduleName.untouched || !newSchdule.controls.schduleName.valid"/>
                </div>
                <label class="col-sm-1 control-label">
                    <span ngClass="start_red">*</span>
                    排班时间：
                </label>
                <div class="col-sm-5 ui-no-padding-left-15px">
                    <input class="form-control cursor_not_allowed" type="text" formControlName="scheduleCreateTime"
                           pInputText id="create_time"  readonly [ngModel]="defaultCreateTime"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">
                    <span ngClass="start_red">*</span>
                    值班部门：
                </label>
                <div class="col-sm-5 ui-no-padding-left-15px">
                    <div class="col-sm-8 ui-fluid ui-fluid-no-padding">
                        <input type="text"
                               pInputText id="department"
                               name="department"
                               placeholder="请选择值班部门"
                               [(ngModel)]="selectedDepartment"
                               class="form-control"
                               formControlName="scheduleDepartment"/>
                    </div>
                    <div class="col-sm-2 ui-fluid-no-padding ui-padding-10px">
                        <button ngClass="ui-g-12  ui-fluid-no-padding"  pButton type="button" (click)="showTreeDialog()" label="选择" ></button>
                    </div>
                    <div class="col-sm-2 ui-fluid-no-padding ui-padding-10px">
                        <button ngClass="ui-g-12  ui-fluid-no-padding" pButton type="button" (click)="clearTreeDialog()" label="清空"></button>
                    </div>
                </div>
                <label class="col-sm-1 control-label">
                    <span ngClass="start_red">*</span>
                    审批人：
                </label>
                <div class="col-sm-5 ui-fluid ui-no-padding-left-15px">
                    <p-autoComplete  [suggestions]="approveSearchOptions"
                                     [formControl]="approvarValue"
                                     [(ngModel)]="approveSelectedMultipleOption"
                                     (completeMethod)="filterApproverMultiple($event)"
                                     [minLength]="1" [required]="true"
                                     placeholder="请选择审批人"
                                     [multiple]="true"
                                     name="test"
                                     [dropdown]="true"
                                     formControlName="scheduleApprovor"
                                     id="approval" >
                    </p-autoComplete>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">
                    <span ngClass="start_red">*</span>
                    开始时间：
                </label>
                <div class="col-sm-5 ui-fluid ui-no-padding-left-15px">
                    <p-calendar [(ngModel)]="beginTime" [showIcon]="true" [locale]="zh" name="beginTime"
                                [styleClass]="'schedule-add'" dateFormat="yy-mm-dd" [required]="true"
                                (onSelect) = "startTimeSelected(beginTime)"
                                [minDate]="beginTimeCalendar"
                                id="startCalendar"
                                formControlName="schduleStart">
                    </p-calendar>
                </div>
                <label class="col-sm-1 control-label">
                    <span ngClass="start_red">*</span>
                    结束时间：
                </label>
                <div class="col-sm-5 ui-no-padding-left-15px">
                    <p-calendar [(ngModel)]="endTime" [showIcon]="true" [locale]="zh" name="end_time"
                                [styleClass]="'schedule-add'" dateFormat="yy-mm-dd" [required]="true"
                                [minDate]="endTime"
                                id="endCalendar"
                                ngClass="ui-fluid"
                                formControlName="schduleEnd">
                    </p-calendar>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">
                    <span ngClass="start_red">*</span>
                    排班班次：
                </label>
                <div class="col-sm-11 ui-no-padding-left-15px">
                    <p-autoComplete  [suggestions]="shiftSearchOptions"
                                     [formControl]="shiftValue"
                                     [(ngModel)]="shiftSelectedMultipleOption"
                                     (completeMethod)="filterShiftMultipe($event)"
                                     [minLength]="1" [required]="true"
                                     [multiple]="true" name="test"
                                     [dropdown]="true"
                                     placeholder="请选择排班班次"
                                     ngClass="ui-fluid"
                                     formControlName="schduleShift"
                    >
                    </p-autoComplete>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">关联排班：</label>
                <div class="col-sm-11 ui-no-padding-left-15px">
                    <p-autoComplete  [suggestions]="relativeSearchOptions"
                                     [formControl]="relativeValue" [(ngModel)]="relativeSelectedMultipleOption"
                                     (completeMethod)="filterRelativeMutipe($event)" [minLength]="1"
                                     placeholder="请选择关联排班"
                                     [multiple]="true" name="test"  [dropdown]="true"
                                     id="relative"
                                     ngClass="ui-fluid"
                                     formControlName="schduleRelative">
                    </p-autoComplete>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12 ui-no-padding-left-15px">
                    <button  class="pull-right" pButton type="button" (click)="downloadModel()" label="生成排班表" [disabled]="hadSaved"></button>
                    <p-fileUpload  class="pull-right ui-margin-right-10px"
                        #fubauto
                        mode="basic"
                        name="file"
                        url="{{ uploadIp }}"
                        *ngIf="downloadBtn"
                        accept="application/*"
                        maxFileSize="1000000"  auto="true" chooseLabel="导入排班表"
                        (onBeforeUpload)="onBeforeUpload($event)"
                        (onUpload)="onUpload($event)">
                    </p-fileUpload>
                    <button pButton class="pull-right ui-margin-right-10px"  type="button" (click)="showInputBtn()" label="导入排班表" [disabled]="hadDownload" *ngIf="hadDownload" ></button>
                    <button pButton  class="pull-right ui-margin-right-10px"  type="button" (click)="submit()" label="保存" [disabled]="saved"></button>
                </div>
            </div>
        </form>
    <p-growl [(value)]="msgPop"></p-growl>
    <p-dialog header="部门选择" [(visible)]="departementDisplay" modal="modal" width="300" [responsive]="true">
        <p-tree [value]="filesTree4"
                selectionMode="checkbox"
                [(selection)]="selected"
                (onNodeExpand)="nodeExpand($event)"
                (onUpload)="onUpload($event)"
        ></p-tree>
        <div>Selected Nodes: <span *ngFor="let file of selected">{{file.label}} </span></div>
        <p-footer>
            <button type="button" pButton icon="fa-check" (click)="closeTreeDialog()" label="确定"></button>
            <button type="button" pButton icon="fa-close" (click)="departementDisplay=false" label="取消"></button>
        </p-footer>
    </p-dialog>

</div>
